<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上售饭系统</title>
</head>
<style>
    /*.img-group {*/
    /*    position: relative;*/
    /*    display: inline-block;*/
    /*}*/

    .img-tip {
        position: relative;
        bottom: 0;
        background: #fff;
        color: #8A2BE2;
        display: inline-block;
        width: 70%;
        text-align: center;
    }

    /*.img-group:hover .img-tip {*/
    /*    display: block;*/
    /*    width: 100%;*/
    /*    text-align: center;*/
    /*}*/
</style>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>


<body>
<div class="layui-layout layui-layout-admin" id="app">
    <!-- 头部 -->
    <div class="layui-header" style="background-color:WhiteSmoke;">
        <div class="layui-logo" style="font-size:20px;">网上售饭系统</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <a href="javascript:;" style="color: darkmagenta;">
                    学号：{{stuno}}
                </a>

            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item "><button class="layui-btn layui-btn-primary layui-anim layui-anim-scale"
                                                onclick="user()">个人信息</button></li>
            <li class="layui-nav-item "><button class="layui-btn layui-btn-warm  layui-anim layui-anim-scale"
                                                onclick="loginOut()">退出</button></li>
        </ul>
    </div>
    <!-- 中间 -->

    <div>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">荤菜组</li>
                <li>素菜组</li>
                <li>面食组</li>
                <li>购物车</li>
            </ul>

            <!-- 图片 -->

            <div class="layui-tab-content" >
                <!-- 荤菜 -->

                <div class="layui-tab-item layui-show" >
                    <div>
                        <div id="huncai1" >
                            <div v-for="imgsrc in huncai" style="float: left;" class="img-group">
                                <div style="margin-left: 20px"></div>
                                <div style="margin-left: 19px"><button class="layui-btn layui-btn-normal"
                                                                       @click="goumai(imgsrc.id,imgsrc.name,imgsrc.price)">购物车</button>
                                    <button class="layui-btn layui-btn-normal"
                                            @click="pingfen(imgsrc.id)">评分</button>
                                </div>
                                <img :src="'image/'+imgsrc.id+'.png'" width="150px" height="150px"
                                     style="margin: 20px;" /></img>
                                <div class="img-tip">{{imgsrc.name}} ￥{{imgsrc.price}}元</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 素菜 -->

                <div class="layui-tab-item">
                    <div id="sucai1">
                        <div v-for="imgsrc2 in sucai" style="float: left;" class="img-group">
                            <div style="margin-left: 20px"></div>
                            <div style="margin-left: 19px"><button class="layui-btn layui-btn-normal"
                                                                   @click="goumai(imgsrc2.id,imgsrc2.name,imgsrc2.price)">购物车</button>
                                <button class="layui-btn layui-btn-normal" @click="pingfen(imgsrc2.id)">评分</button>
                            </div>
                            <img :src="'image/'+imgsrc2.id+'.png'" width="150px" height="150px"
                                 style="margin: 20px;" /></img>
                            <div class="img-tip">{{imgsrc2.name}} ￥{{imgsrc2.price}}元</div>
                        </div>
                    </div>
                </div>
                <!-- 面食 -->

                <div class="layui-tab-item">
                    <div id="mianshi1">
                        <div v-for="imgsrc3 in mianshi" style="float: left;" class="img-group">
                            <div style="margin-left: 20px"></div>
                            <div style="margin-left: 19px"><button class="layui-btn layui-btn-normal"
                                                                   @click="goumai(imgsrc3.id,imgsrc3.name,imgsrc3.price)">购物车</button>
                                <button class="layui-btn layui-btn-normal" @click="pingfen(imgsrc3.id)">评分</button>
                            </div>
                            <img :src="'image/'+imgsrc3.id+'.png'" width="150px" height="150px"
                                 style="margin: 20px;" /></img>
                            <div class="img-tip">{{imgsrc3.name}} ￥{{imgsrc3.price}}元</div>
                        </div>
                    </div>
                </div>
                <!-- 购物车--------- -->

                <div class="layui-tab-item">
                    <div>
                        <div v-for="imgsrc1 in dingdan" style="float: left;" class="img-group" v-show="imgsrc1.see">
                            <div>
                                <input class="addBtn min layui-btn layui-btn-normal" style="float: left;margin-left: 28px" type="button" value="-"
                                       @click="minMoney(imgsrc1.id)"/>
                                <input class="join-money layui-input" style="width: 50px;float: left;text-align: center" :id=imgsrc1.id type="text"
                                       value="1">
                                <input class="addBtn add glyphicon-chevron-up layui-btn layui-btn-warm" type="button" value="+"
                                       @click="addMoney(imgsrc1.id)" /><br>
                            </div>
                            <img :src="'image/'+imgsrc1.id+'.png'" width="150px" height="150px"
                                 style="margin: 20px;" @click="clear(imgsrc1.id)" v-if="imgsrc1.id" /></img>
                            <div class="img-tip">{{imgsrc1.name}} ￥{{imgsrc1.price}}元</div>
                        </div>
                    </div>
                    <div style="height:230px;position: absolute;left: 570px;top: 500px">
                        <input type="submit" onclick="jiesuan()" value="结算" class="layui-btn layui-btn-normal" style="width: 200px">
                        <input type="submit" onclick="qingkong()" value="清空购物车" class="layui-btn layui-btn-danger" style="width: 200px">
                    </div>


                </div>

            </div>
        </div>
    </div>

</div>
<div class="social-share1" style="text-align:center; display:none;" id="shareDiv">
    <img id="testimg" style="float:right;cursor:pointer" alt="" width="300" height="300" />
</div>
<div class="social-share1" style="text-align:center; display:none;" id="sharePin">
    <h2>评分</h2>
    <div style="margin-top: 20px;">
        <div id="test1"></div>
    </div>
</div>
</body>
<script>
    //加载菜品,个人信息---------------
    $(function () {
        vm.stuno = getParams("stuno");
        //获取传过来的值
        function getParams(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        };
        //请求菜品----
        $.ajax({
            url: "getAllDishes.action",
            dataType: "json",
            type: "POST",
            success: function (req) {
                /*

                 评分属性为avg:  req.meat[0].avg

                */
                //荤菜
                vm.huncai = req.meat;
                vm.sucai = req.vege;
                vm.mianshi = req.noodle;
                vm.stuName = req.stuName;
                vm.className = req.className;
            },
            error: function (msg) {
                console.log(msg);
                layer.alert('查询失败', { title: '菜单' }, function (index) {
                    layer.close(index);
                });
            }
        });
    })
    layui.use(['jquery', 'form', 'layer', 'element', 'code', 'rate'], function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var element = layui.element;
        var code = layui.code;
        var rate = layui.rate;
        //上传评分--------------------------------------------
        rate.render({
            elem: '#test1'
            , value: vm1.pingfen //初始值
            , text: true //开启文本
            , choose: function (value) {
                vm1.pingfen = value;
                $.ajax({
                    url: "mark.action",
                    data: {
                        'id': vm1.id,
                        'pingfen': vm1.pingfen
                    },
                    type: "POST",
                    success: function (req) {
                        layer.alert('评分成功', { title: '评分' }, function (index) {
                            layer.close(index);
                            history.go(0);
                        });
                    },
                    error: function (msg) {
                        console.log(msg);
                        layer.alert('评分失败', { title: '评分' }, function (index) {
                            layer.close(index);
                        });
                    }
                });
            }
        });
        var hunArr = $("#huncai1").find("div");
        var suArr = $("#sucai1").find("div");
        var mianArr = $("#mianshi1").find("div");
        var bnum =0;
        var cnum =0;
        var dnum =0;
        for (var anum = 1; anum <= hunArr.length; anum++) {
            // 渲染
            rate.render({
                elem: hunArr[anum]
                , value: vm.huncai[bnum].avg
                , readonly: true
                , half: true
                , text: true
            });
            anum += 3;
            bnum += 1;
        }for (var anum = 1; anum <= suArr.length; anum++) {
            // 渲染
            rate.render({
                elem: suArr[anum]
                , value: vm.sucai[cnum].avg
                , readonly: true
                , half: true
                , text: true
            });
            anum += 3;
            cnum += 1;
        }for (var anum = 1; anum <= mianArr.length; anum++) {
            // 渲染
            rate.render({
                elem: mianArr[anum]
                , value: vm.mianshi[dnum].avg
                , readonly: true
                , half: true
                , text: true
            });
            anum += 3;
            dnum += 1;
        }


    });

    var vm1 = new Vue({
        el: "#sharePin",
        data: {
            'id': "",
            'pingfen': 1
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {
            'see': true,
            'stuno': "1706032123",
            'stuName': "admin",
            'className': "3班",
            'huncai': 0,
            'sucai': 0,
            'mianshi': 0,
            'dingdan': [
                {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                },
                {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }, {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }, {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }, {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                },
                {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }
            ],
            'qingkong': [
                {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                },
                {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }, {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }, {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }, {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                },
                {
                    'id': null,
                    'name': null,
                    'price': null,
                    'see': false
                }
            ],
            'gouwu': {
                'time': "",
                'id': [],
                'num': [],
                'price': ""
            },
            'gold': [0, 0, 0, 0, 0]

        },
        methods: {
            // 添加到购物车
            goumai(res, name, price) {
                var num = 0;
                for (num; num <= 5; num++) {
                    for (var c = 0; c < 5; c++) {
                        if (this.dingdan[c].id == res) {
                            layer.alert('该商品已存在购物车', { title: '添加失败' }, function (index) {
                                layer.close(index);
                            });
                            return false;
                        }
                    }
                    if (this.dingdan[num]) {
                        if (this.dingdan[num].id == null && num < 5) {
                            this.dingdan[num].id = res;
                            this.dingdan[num].name = name;
                            this.dingdan[num].price = price;
                            this.dingdan[num].see = true;
                            Vue.set(this.dingdan, num, this.dingdan[num]);
                            layer.alert('已添加到购物车', { title: '添加成功' }, function (index) {
                                layer.close(index);
                            });
                            return false;
                        }
                        else if (num == 5) {
                            layer.alert('已添加数量达上限，最多添加五个菜品', { title: '添加失败' }, function (index) {
                                layer.close(index);
                            });
                        }
                    }
                    else {
                        layer.alert('已添加数量达上限，最多添加五个菜品', { title: '添加失败' }, function (index) {
                            layer.close(index);
                        });
                        break;
                    }

                }
            },
            //清除购物车
            clear(res) {
                this.dingdan[5].id = null;
                this.dingdan[5].name = null;
                this.dingdan[5].price = null;
                this.dingdan[5].see = false;
                Vue.set(this.dingdan, 5, this.dingdan[5]);
                var j = 1;
                var b = 0;
                for (b; b < 5; b++) {
                    if (this.dingdan[b].id == res) {
                        var a = b;
                        if (a == 4) {
                            this.dingdan[4].id = null;
                            this.dingdan[4].name = null;
                            this.dingdan[4].price = null;
                            this.dingdan[4].see = false;
                            Vue.set(this.dingdan, 4, this.dingdan[4]);
                            break;
                        }
                        else {
                            var c = b;
                            for (c; c <= 4; c++) {
                                this.dingdan[c] = this.dingdan[c + 1];
                                Vue.set(this.dingdan, c, this.dingdan[c]);

                            }
                            break;
                        }
                    }
                }
                layer.alert('已清除订单', { title: '购物车' }, function (index) {
                    layer.close(index);
                });
            },
            //评分
            pingfen(res) {
                vm1.id = res;
                layer.open({
                    type: 1,
                    skin: '', //样式类名
                    title: false,
                    offset: 'auto',
                    area: ['300px', '150px'], //宽高
                    closeBtn: 1, //不显示关闭按钮
                    shade: 0,
                    anim: 2,
                    time: 8000,
                    shadeClose: true, //开启遮罩关闭
                    content: $("#sharePin")
                });
            },
            //数量加1
            addMoney(res) {
                for (var num = 0; num <= 4; num++) {
                    if (this.dingdan[num].id == res) {
                        var dId = this.dingdan[num].id;
                        var dPr = this.dingdan[num].price;
                        var money1 = parseInt(document.getElementById(dId).value);
                        document.getElementById(dId).value = money1 + 1;
                        console.log(document.getElementById(dId).value);

                    }
                }
            },
            //数量减1
            minMoney(res){
                for (var num = 0; num <= 4; num++) {
                    if (this.dingdan[num].id == res && document.getElementById(this.dingdan[num].id).value > 1) {
                        var money1 = parseInt(document.getElementById(this.dingdan[num].id).value);
                        document.getElementById(this.dingdan[num].id).value = money1 - 1;
                    }
                }
            }
        }
    });
    //清空购物车
    function qingkong() {
        vm.dingdan = vm.qingkong;
    }
    //结算
    function jiesuan() {
        var gold1 = 0;
        for (var num = 0; num <= 4; num++) {
            if (vm.dingdan[num].id != null) {
                var dId = vm.dingdan[num].id;
                var dPr = vm.dingdan[num].price;
                var dindan = parseInt(document.getElementById(dId).value);
                vm.gold[num] = dPr * dindan;
                gold1 += vm.gold[num];
                vm.gouwu.id[num] = dId;
                vm.gouwu.num[num] = dindan;
            }
            else {
                break;
            }
        }
        var time = new Date();
        vm.gouwu.time = time.toLocaleDateString();
        vm.gouwu.price = gold1;
        layer.open({
            content: '总金额：' + gold1 + '元'
            , btn: ['购买', '取消']
            , yes: function (index, layero) {
                //按钮【按钮一】的回调
                $.ajax({
                    url: "getOrder.action",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify
                    ({
                        'ids': vm.gouwu.id,
                        'nums': vm.gouwu.num,
                        'stuno': vm.stuno,
                        'date': vm.gouwu.time
                    }),
                    type: "POST",
                    success: function (req) {

                    },
                    error: function (msg) {
                        console.log(msg);
                        layer.alert('购买失败', { title: '购买' }, function (index) {
                            layer.close(index);
                        });
                    }
                });
                $("#testimg").attr("src", "http://qr.liantu.com/api.php?text=" + 'https://qr.alipay.com/fkx18423imjzdpgfqlq3782');
                layer.open({
                    type: 1,
                    skin: '', //样式类名
                    title: false,
                    offset: 'auto',
                    area: ['300px', '300px'], //宽高
                    closeBtn: 0, //不显示关闭按钮
                    shade: 0,
                    anim: 2,
                    time: 3000,
                    shadeClose: true, //开启遮罩关闭
                    content: $("#shareDiv")
                });
            }, btn2: function (index, layero) {
                //按钮【按钮二】的回调
                //location.href = "welcome.html";
                //return false 开启该代码可禁止点击该按钮关闭
            }
            , cancel: function () {
                //右上角关闭回调
                // location.href="index.html";
                location.href = "welcome.html";
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    }
    //个人信息--------------
    function user() {

        var stuno = vm.stuno;
        var url = "user.html?stuno=" + stuno;
        window.location.href = url;
    }
    //退出------------------
    function loginOut() {
        location.href = "login.html";
    }

</script>

</html>